import React, { useEffect, useState } from 'react'
import { Form, Button, DatePicker, Input, Modal, Radio, Select, Steps, Row, Col, TreeSelect, Descriptions, Card } from 'antd'

import { connect } from 'umi'

const FormItem = Form.Item
const { Option } = Select

const formLayout = {
  labelCol: { span: 7 },
}

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
}

const CreateForm = (props) => {

  const { onSubmit, onCancel, currentUser, global = {}, current, visible } = props
  const { options = {} } = global
  const { orgLine = [], orgSystem = [], jobLevel = [] } = options
  const [form] = Form.useForm()
  const [formVals, setFormVals] = useState({

  })

  useEffect(() => {
    if(current) {
      form.setFieldsValue(current)
    }
  }, [current])

  const onFormCancel = () => {
    form.resetFields()
    onCancel()
  }

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields()
    setFormVals({ ...formVals, ...fieldsValue })
    form.resetFields()
    onSubmit({
      ...fieldsValue,
      id:current ? current.id : null,
      orgSystemName:orgSystem.find(item=>item.id===fieldsValue.orgSystemId)?.name,
      orgLineName:orgLine.find(item=>item.id===fieldsValue.orgLineId)?.name,
      jobLevel:jobLevel.find(item=>`${item.id}`===fieldsValue.jobLevelId)?.name
    })
  }

  const filterOption = (input, option) => {
    return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  }

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="orgSystemId" label="体系">
              <Select placeholder="请选择" showSearch filterOption={filterOption}>
                {orgSystem.map((item, index) => {
                  return (
                    <Option value={`${item.id}`} key={item.id}>
                      {item.name}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>

          <Col {...colStyle}>
            <FormItem name="orgLineId" label="条线">
              <Select placeholder="请选择" showSearch filterOption={filterOption}>
                {orgLine.map((item, index) => {
                  return (
                    <Option value={`${item.id}`} key={item.id}>
                      {item.name}
                    </Option>
                  )
                })}
              </Select>
            </FormItem>
          </Col>

          <Col {...colStyle}>
            <Form.Item name="jobLevelId" label="职级">
              <Select placeholder="请选择" showSearch filterOption={filterOption}>
                {
                  jobLevel.map((item, index) => {
                    return (
                      <Option value={`${item.id}`} key={item.id}>
                        {item.name}
                      </Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>

          <Col {...colStyle}>
            <FormItem name="salaryLevel1" label="一档月薪">
              <Input/>
            </FormItem>
          </Col>

          <Col {...colStyle}>
            <FormItem name="salaryLevel2" label="二档月薪">
              <Input/>
            </FormItem>
          </Col>

          <Col {...colStyle}>
            <FormItem name="salaryLevel3" label="三档月薪">
              <Input/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" onClick={() => handleSubmit()}>提交</Button>
      </>
    )
  }

  return (
    <Modal
      width={1280}
      destroyOnClose
      title="新建薪酬带宽"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{ ...formVals }}
        style={{ paddingTop: '24px' }}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
}


export default connect(({ user, global }) => ({
  global,
  currentUser: user.currentUser,
}))(CreateForm)
